<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>挥发试验室</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--头部-->
<div class="header">
    <div class="centerArea">
        <div class="header_one">
            <a href="#"><img src="img/logo.png" srcset="img/logo@2x.png 2x,img/logo@3x.png 3x" class="logo"></a>
            <div class="header_one-right">
                <a class="layer">学校门户</a><a class="layer">邮箱登录</a><a class="layer">English</a>
                <div class="header_search">
                    <form action="#"><input type="text" placeholder="搜索"><input type="submit" value="" style="background:url('./img/icon-search.png') no-repeat"></input></form>
                </div>
            </div>
        </div>
        <div class="header_two">
            <ul class="first-ul">
                <li class="first-ulli"><a href="#">首页</a></li>
                <li class="first-ulli"><a href="#">实验室概况</a>
                </li>
                <li class="first-ulli"><a href="#">技术研发</a></li>
                <li class="first-ulli"><a href="#">研究团队</a>
                    <ul class="second-ul">
                        <span class="tim"></span>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            技术评估与标准化研究所
                        </a></li>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            配套材料研究所
                        </a></li>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            检测与大数据所
                        </a></li>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            技术装备研究所
                        </a></li>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            关键材料研究所
                        </a></li>
                        <li class="second-ulli"><a href="javascript:void(0);">
                            源头过程控制所
                        </a></li>
                    </ul>
                </li>
                <li class="first-ulli"><a href="#">社会服务</a></li>
                <li class="first-ulli"><a href="#">合作交流</a></li>
                <li class="first-ulli"><a href="#">资料下载</a></li>
                <li class="first-ulli"><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
<!--轮播图-->
<div class="swiper-container swiper-contian" id="swiper-1">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-li"><a href="javascript:void(0)"><img src="./img/slide.jpg" alt="slide1"></a></div>
        <div class="swiper-slide swiper-li"><a href="javascript:void(0)"><img src="./img/slide.jpg" alt="slide2"></a></div>
        <div class="swiper-slide swiper-li"><a href="javascript:void(0)"><img src="./img/slide.jpg" alt="slide3"></a></div>
        <div class="swiper-slide swiper-li"><a href="javascript:void(0)"><img src="./img/slide.jpg" alt="slide4"></a></div>
    </div>

    <div class="banner">
        <!-- 如果需要分页器 -->
        <a href="#" class="arrow-left swiper-button-prev" id="swiper-button-prev"></a>
       <div class="pagination swiper-pagination" id="pagination1"></div>
        <!-- 如果需要导航按钮 -->
        <a href="#" class="arrow-right swiper-button-next" id="swiper-button-next"></a>
    </div>
</div>
<!--单列-->
<div class="simple">
    <div class="centerArea">
        <ul id="simple_ul">
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">实验室简介<span class="second-span"></span></span></a><div class="simple-content">了解国家工程实验室的简介，组织结构等</div></li>
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">理事会<span class="second-span"></span></span></a><div class="simple-content">了解理事会简介和人员构成，机构等</div></li>
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">技术委员会<span class="second-span"></span></span></a><div class="simple-content">了解技术委员会简介和人员构成等</div></li>
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">技术装备<span class="second-span"></span></span></a><div class="simple-content">了解国家工程实验室的技术设备</div></li>
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">仪器设备<span class="second-span"></span></span></a><div class="simple-content">了解国家工程实验室的仪器设备</div></li>
            <li><a href="javascript:void(0);"><div class="img"></div><span class="first-span">检测预约<span class="second-span"></span></span></a><div class="simple-content">了解国家工程实验室的检测预约流程</div></li>
        </ul>
    </div>
</div>
<!--新闻-->
<div class="news">
    <div class="centerArea">
        <span class="news_top">实验室新闻</span>
        <span class="news_news">NEWS</span>
        <a herf="javascript:void(0);" class="news_more">MORE+</a>
       <ul class="news-contain">
           <li><div class="news-bg">
           <a href="javascript:void(0);">
               <img src="./img/img-news1.png" alt="">
           </a>
       </div>
               <div class="news-head">
                   <a href="javasript:void(0);">
                       第一届技术委员会第二次会议暨广东省大气环境与污染控制重点实验室第二届会议召开
                   </a>
           </div>
               <div class="news-content">
                   2017年12月28日，挥发性有机物污染治理技术与装备国家工程实验室第一届技术委员会暨广东省大气环境与污染控制重点实验室第二届技术与学术委员会第二次会议在广州召开。
               </div>
               <div class="news-data">
                   2017-12-28
               </div>
           </li>
           <li><div class="news-bg">
               <a href="javascript:void(0);">
                   <img src="./img/img-news2.png" alt="">
               </a>
           </div>
               <div class="news-head">
                   <a href="javascript:void(0);">
                       中国环境科学学会挥发性有机物污染防治专业委
                       员会常务委员会第六次会议在广州顺利召开
                   </a>
               </div>
               <div class="news-content">
                   2017年12月21日，中国环境科学学会挥发性有机物污染防治专业委员会（以下称“中环学VOCs专委会”）常务委员会第六次会议在广东省广州市珠江宾馆召开。
               </div>
               <div class="news-data">
                   2017-12-21
               </div>
           </li>
           <li><div class="news-bg">
               <a href="javascript:void(0);">
                   <img src="./img/img-news3.png" alt="">
               </a>
           </div>
               <div class="news-head">
                   <a href="javascript:void(0);">
                       2017全国VOCs监测与治理高峰论坛暨首届
                       VOCs创新 示范项目交流活动、中环学VOCs…
                   </a>
               </div>
               <div class="news-content">
                   为推进VOCs监测与治理产业的持续发展，共同探讨改善VOCs环境质量现状的途径，深化VOCs污染防治工作，实现我国“十三五”VOCs减排目标，2017年12月21-22日，由…
               </div>
               <div class="news-data">
                   2017-11-10
               </div>
           </li>
       </ul>
    </div>
</div>
<!--专家视点-->
<div class="viewpoints">
    <div class="centerArea">
        <div class="vp-top">专家视点</div>
        <div class="vp-gray">VIEWPOINTS</div>
        <a herf="javascript:void(0);" class="vp_more">MORE+</a>
        <div class="swiper-container" id="swiper-2">
            <ul class="viewpoints-wrap swiper-wrapper">
                <li class="swiper-slide">
                    <div class="vp-bg">
                        <a href="javascript:void(0);">
                            <img src="./img/img-zj1.png" alt="">
                        </a>
                    </div>
                    <div class="vp-content">
                        <a href="javasript:void(0);">
                            郝吉明院士解读：2月26-27日京津冀及周边地区大气重污染过程
                        </a>
                    </div>
                    <div class="vp-data">
                        2018-02-28
                    </div>
                </li>
                <li class="swiper-slide">
                    <div class="vp-bg">
                        <a href="javascript:void(0);">
                            <img src="./img/img-zj2.png" alt="">
                        </a>
                    </div>
                    <div class="vp-content">
                        <a href="javasript:void(0);">
                            柴发合：2018年环保攻坚战怎么
                            打？
                        </a>
                    </div>
                    <div class="vp-data">
                        2018-02-26
                    </div>
                </li>
                <li class="swiper-slide">
                    <div class="vp-bg">
                        <a href="javascript:void(0);">
                            <img src="./img/img-zj3.png" alt="">
                        </a>
                    </div>
                    <div class="vp-content">
                        <a href="javasript:void(0);">
                            杨向宏：涂料行业VOCs排放现状与治理需求
                        </a>
                    </div>
                    <div class="vp-data">
                        2017–08-30
                    </div>
                </li>
                <li class="swiper-slide">
                    <div class="vp-bg">
                        <a href="javascript:void(0);">
                            <img src="./img/img-zj4.png" alt="">
                        </a>
                    </div>
                    <div class="vp-content">
                        <a href="javasript:void(0);">
                            专家：集装箱制造业大气污染国标正在制定
                        </a>
                    </div>
                    <div class="vp-data">
                        2017-06-13
                    </div>
                </li>
            </ul>
            <div class="swiper-button-next swiper-button" id="next2">&gt;</div>
            <div class="swiper-button-prev swiper-button" id="prev2">&lt;</div>
        </div>

    </div>
</div>
<!--tab栏-->
<div class="tabs">
    <div class="centerArea">
        <ul class="tabs-wraper">
            <li>
                <div class="tabs-head">
                    <div class="tabs-top">信息公布</div>
                    <div class="tabs-gray"> NOTICES</div>
                    <div class="tabs-more"><a href="javascript:void(0);">more+</a></div>
                </div>
                <div class="tabs-body notices">
                    <div class="tabs-bodyli">
                        <div class="calendar">
                            <span class="year">2017</span>
                            <span class="month">三月</span>
                            <span class="data">21</span>
                        </div>
                        <div class="tabs-content">
                            <a href="javasript:void(0);">
                                省人大副主任、省总工会主席黄业斌一行清远校区现场办公并与学生共度五四青年节
                            </a>
                        </div>
                    </div>
                    <div class="tabs-bodyli">
                        <div class="calendar">
                            <span class="year">2017</span>
                            <span class="month">三月</span>
                            <span class="data">21</span>
                        </div>
                        <div class="tabs-content">
                            <a href="javasript:void(0);">
                                省人大副主任、省总工会主席黄业斌一行清远校区现场办公并与学生共度五四青年节
                            </a>
                        </div>
                    </div>
                    <div class="tabs-bodyli">
                        <div class="calendar">
                            <span class="year">2017</span>
                            <span class="month">三月</span>
                            <span class="data">21</span>
                        </div>
                        <div class="tabs-content">
                            <a href="javasript:void(0);">
                                省人大副主任、省总工会主席黄业斌一行清远校区现场办公并与学生共度五四青年节
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="tabs-head">
                    <div class="tabs-top">科研成果</div>
                    <div class="tabs-gray">SCIENTIFIC ACHIEVEMENTS</div>
                    <div class="tabs-more"><a href="javascript:void(0);">more+</a></div>
                </div>
                <div class="tabs-body achievements">
                    <div class="achie-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                有机废气治理行业2016年发展综述
                            </a>
                            </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="achie-li content-li">
                        <div class="li-content"> <a href="javasript:void(0);">
                            新的《大气污染防治法》开始实施，为VOCs的污染防治…
                        </a></div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="achie-li content-li">
                        <div class="li-content"> <a href="javasript:void(0);">
                            《挥发性有机物排污收费试点办法》的颁布实施，极大地…
                        </a></div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="achie-li content-li">
                        <div class="li-content"> <a href="javasript:void(0);">
                            国家和地方加大了重点行业排放标准的制定与实施力度…
                        </a></div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="achie-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                各地制定了VOCs综合治理规划和整治方案，公布了涉…
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="tabs-head">
                    <div class="tabs-top">工程案例</div>
                    <div class="tabs-gray">ENGINEERING PROJECTS</div>
                    <div  class="tabs-more"><a herf="javascript:void(0);">more+</a></div>
                </div>
                <div class="tabs-body projects">
                    <div class="proj-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                皮革制品和制鞋工业大气污染物排放标准
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="proj-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                大气污染物综合排放标准
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="proj-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                山西省工业涂装、包装印刷、医药制造行业挥发性有机物…
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="proj-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                合成树脂工业污染物排放标准
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                    <div class="proj-li content-li">
                        <div class="li-content">
                            <a href="javasript:void(0);">
                                北京：《餐饮业大气污染物排放标准》
                            </a>
                        </div>
                        <div class="li-data">2017-05-11</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="link">
            <span class="link-left">友情链接：</span>
            <a class="link-right" href="http://www.voc-china.org/home?act=home">中国环境科学学会挥发性有机物污染防治专业委员会</a>
        </div>
    </div>
</div>
<!--footer-->
<div class="footer">
    <div class="centerArea">
        <div class="message">
            <span class="address">地址：广东省广州市番禺区大学城外环东路382号B4环境楼</span>
            <span class="addr-code">  510006</span>
            <span class="telphone">业务联系电话：020-39380516 </span>
            <span class="email">邮件：zhangli2017@scut.edu.cn</span>
        </div>
        <div class="team-wrap">
            <select name="team" id="team"  class="team">
                <option value="develop" selected>开发团队</option>
            </select>
        </div>
        <div class="other-wrap">
            <select name="other" id="other"  class="other">
                <option value="one" selected>其他单位</option>
            </select>
        </div>
        <div class="wx-logo">
            <a href="javascript:void (0)" class="logo"></a>
            <a href="javascript:void(0)" class="QR-code"></a>
        </div>
    </div>
</div>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>